<template>  
    <div>  
        <div :class="['sidebar', { hidden: isHidden }]">  
            <ul class="sidebar-content">  
                <li><a href="/">主页</a></li>
                <li><a href="/home2">首页</a></li>  
                <li><a href="/prelude">新中国成立前奏</a></li>  
                <li><a href="/founding">新中国成立经过</a></li>  
                <li><a href="/significance">新中国成立意义</a></li>  
            </ul>  
        </div>  
        <button @click="toggleSidebar" class="toggle-button">  
            {{ isHidden ? '显示侧边栏' : '隐藏侧边栏' }}  
        </button>  
    </div>  
</template>  

<script>  
export default {  
    name: 'Sidebar',  
    data() {  
        return {  
            isHidden: false, // 侧边栏可见性状态  
        };  
    },  
    methods: {  
        toggleSidebar() {  
            this.isHidden = !this.isHidden; // 切换可见性  
        },  
    },  
}  
</script>  

<style scoped>  
.sidebar {  
    position: fixed;  
    left: 0;  
    top: 0;  
    bottom: 0;  
    width: 200px; /* 设置宽度为200px */  
    background-color: #f4f4f4;  
    padding: 20px;  
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);  
    overflow-y: auto;  
    z-index: 1000;  
    transform: translateX(0); /* 初始状态，侧边栏显示 */  
    transition: transform 0.3s ease-in-out; /* 过渡效果 */  
}  

.sidebar.hidden {  
    transform: translateX(-100%); /* 侧边栏向左移动隐藏 */  
}  

.toggle-button {  
    position: fixed; /* 固定位置 */  
    left: 200px; /* 与侧边栏宽度对应 */  
    top: 20px; /* 顶部距离 */  
    background-color: #007bff; /* 按钮背景颜色 */  
    color: white; /* 按钮文字颜色 */  
    border: none; /* 去掉按钮边框 */  
    padding: 10px; /* 按钮内边距 */  
    cursor: pointer; /* 鼠标悬停为手形 */  
    z-index: 1001; /* 确保按钮位于侧边栏上方 */  
}  

.sidebar-content {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
}  

.sidebar-content li {  
    margin-bottom: 10px;  
}  

.sidebar-content a {  
    text-decoration: none;  
    color: #333;  
    font-weight: bold;  
    display: block;  
    padding: 10px;  
    text-align: center;  
}  

.sidebar-content a:hover {  
    background-color: #007bff;  
    color: white;  
}  
</style>